<template>
	<view>
		<Header title="云上坚果"></Header>
		<view class="identify_warp">
			<view class="identify br">
				<view class="identify_top br">
					<view class="identify_state ">
						<view class="icon_state"></view>
						<view class="state_text">
							<text>请选择认证的类型</text>
						</view>
					</view>
					<view class="identify_content">
						<p class="firstp">请根据您的情况...</p>
						<p class="secondp">选择类型错误...</p>
					</view>
				</view>
				<view class="identify_main br">
					<view class="identify_img_wrap">
						<view class="identify_img br">
							<view class="hover_tit">
								<text>苗木供应商认证</text>
							</view>
							<view class="hover_desc">
								苗木供应商描述
							</view>
						</view>
					</view>
					<view class="identify_img_wrap">
						<view class="identify_img br">
							<view class="hover_tit">
								<text>苗木供应商认证</text>
							</view>
							<view class="hover_desc">
								苗木供应商描述
							</view>
						</view>
					</view>
					<view class="identify_img_wrap">
						<view class="identify_img br">
							<view class="hover_tit">
								<text>苗木供应商认证</text>
							</view>
							<view class="hover_desc">
								苗木供应商描述
							</view>
						</view>
					</view>
					<view class="identify_img_wrap">
						<view class="identify_img br">
							<view class="hover_tit">
								<text>苗木供应商认证</text>
							</view>
							<view class="hover_desc">
								苗木供应商描述
							</view>
						</view>
					</view>

				</view>

			</view>
		
		</view>
		
		<Footer></Footer>
	</view>
</template>

<script>
	import Footer from "../../components/footer.vue"
	import Header from "../../components/header.vue"
	export default {
		data() {
			return {

			}
		},
		components:{
			Footer,
			Header
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mb0 {
		margin-bottom: 0 !important;
	}
	
	

	// .br{
	// 	border: 1px solid red;
	// }
	body {
		background-color: #f8f8f8;
	}

	.identify_warp {
		padding: 10rpx 26rpx 0;

		.identify {


			// height: 400rpx;

			.identify_top {
				height: 400rpx;
				padding: 20rpx 34rpx 0;
				border-radius: 26rpx;
				background-color: #FFFFFF;
				border: 6rpx solid red;

				.identify_state {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 44rpx;
					font-weight: bold;
					border-bottom: 6rpx solid #f8f8f8;
					padding-bottom: 20rpx;

					.icon_state {
						width: 8rpx;
						height: 20rpx;
						background-color: #05a045;
						margin-right: 30rpx;
						padding-bottom: 20rpx;
					}

				}

				.identify_content {
					height: 540rpx;
					font-size: 40rpx;
					line-height: 120rpx;

					.firstp {
						color: #666666;
					}

					.secondp {
						color: #ff7777;
					}


				}
			}

			.identify_main {
				margin-top: 30rpx;
				border-radius: 16rpx;
				border: 6rpx solid red;

				.identify_img_wrap {
					padding: 50rpx 50rpx 0;
					margin-bottom: 64rpx;

					.identify_img {
						// width: 880rpx;
						// height: 300rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						// font-size: 42rpx;
						width: 600rpx;
						height: 300rpx;
						text-align: center;
						border-radius: 26rpx;
						background-color: rgba(0, 0, 0, .3);
						border: 6rpx solid red;
						// padding: 0 90rpx;
						box-sizing: border-box;

						.hover_tit {
							font-size: 40rpx;
							font-weight: bold;
							color: #f9f9f9;
							margin-bottom: 48rpx;
						}

						.hover_desc {
							font-size: 36rpx;
							color: #e9e9eb;
						}


					}
				}


			}



		}
	}

	// .footer_tit {
	// 	width: 100%;
	// 	padding: 48rpx 0;
	// 	text-align: center;
	// 	color: #bfbfc3;
	// 	background-color: #bfa;


	// }
</style>
